<template>
	<view class="container">
		<view class="list">
			<view class="item" v-for="(d,i) in list" :key="i" @tap="go(d)">
				<view class="left">
					<text class="emoji">{{d.mood.emoji}}</text>
				</view>
				<view class="center">
					<text class="level">{{d.mood.emotion}}</text>
					<text class="desc">整体情绪{{d.mood.emotion}}</text>
					<text class="date">{{formatDate(d.date)}}</text>
				</view>
				<view class="right" :class="statusClass(d.mood.level)">
					<text class="status">{{levelText(d.mood.level)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import apiService from '../../utils/api.js'

export default {
	data(){return{ parent: 'father', list: [] }},
	onLoad(q){ this.parent=q.parent||'father'; this.load() },
	methods:{
		// 生成模拟数据
		getMockData() {
			const mockList = [];
			const today = new Date();
			for (let i = 1; i <= 30; i++) {
				const d = new Date(today);
				d.setDate(d.getDate() - i);
				const dateStr = d.toISOString().split('T')[0];
				mockList.push({
					date: dateStr,
					mood: {
						emoji: ['😊', '😐', '😔'][Math.floor(Math.random() * 3)],
						emotion: ['开心', '平静', '低落'][Math.floor(Math.random() * 3)],
						level: ['良好', '一般', '需要关注'][Math.floor(Math.random() * 3)]
					}
				});
			}
			return mockList;
		},
		
		async load(){
			try {
				// 检查apiService是否可用
				if (!apiService || typeof apiService.getLastNDaysHistory !== 'function') {
					console.warn('apiService不可用，使用模拟数据');
					this.list = this.getMockData().sort((a,b)=>new Date(b.date)-new Date(a.date));
					return;
				}
				
				// 获取历史数据
				const data = await apiService.getLastNDaysHistory(this.parent, 30);
				this.list = data.sort((a,b)=>new Date(b.date)-new Date(a.date));
			} catch (error) {
				console.error('加载历史数据失败:', error);
				// 出错时使用模拟数据
				this.list = this.getMockData().sort((a,b)=>new Date(b.date)-new Date(a.date));
			}
		},
		go(item){
			uni.navigateTo({ url: `/pages/chat-analysis/chat-analysis?parent=${this.parent}&date=${item.date}` })
		},
		formatDate(s){ const d=new Date(s); return `${d.getMonth()+1}月${d.getDate()}日` },
		statusClass(level){ return level==='良好'?'good':level==='一般'?'normal':'low' },
		levelText(level){ return level==='需要关注'?'关注':'正常' }
	}
}
</script>

<style>
.container{ background:#f7f8fa; min-height:100vh; padding: 16rpx; }
.list{ background:#fff; border-radius: 16rpx; overflow:hidden; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06); }
.item{ display:flex; align-items:center; padding: 26rpx; border-bottom:1rpx solid #f0f0f0; }
.item:last-child{ border-bottom:none }
.left{ width: 72rpx; text-align:center }
.emoji{ font-size: 48rpx }
.center{ flex:1 }
.level{ display:block; font-size: 32rpx; font-weight:700; color:#333 }
.desc{ display:block; color:#666; font-size: 24rpx }
.date{ display:block; color:#999; font-size: 22rpx }
.right{ padding: 8rpx 16rpx; border-radius: 20rpx }
.right.good{ background:#e8f5e8; }
.right.normal{ background:#fff3e0; }
.right.low{ background:#ffebee; }
.status{ font-size: 22rpx; color:#333 }
</style>

